<template>
    <div class="role-person-view">
        <div v-for="(role, index) in rolesAndPersons" :key="index" class="role-box">
            <el-divider content-position="left">
                <span>{{role.name}}</span>
                <span class="btn btn-delete"><i class="fa fa-close" /></span>
            </el-divider>
            <el-card v-for="(person, personIndex) in role.persons" :key="personIndex" class="person-item">
                <el-row>
                    <el-col :span="12">{{person.name}}</el-col>
                    <el-col :span="12">
                        <el-button icon="el-icon-close" type="danger" plain circle size="mini" class="btn" ></el-button>
                    </el-col>
                </el-row>
            </el-card>
        </div>


        <el-dialog
                title="角色详情"
                :visible.sync="roleFormDialogVisible"
                width="30%">
            <el-form>
                <el-form-item label="角色名称">
                    <el-input v-model="curRole.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="roleFormDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="roleFormDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="人员详情"
                :visible.sync="personFormDialogVisible"
                width="30%">
            <el-form>
                <el-form-item label="人员名称">
                    <el-input v-model="curPerson.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="personFormDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="personFormDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: 'ProjectRolePerson',
        props: {
            projectId: String
        },
        data() {
            return {
                roleFormDialogVisible: false,
                curRole: {
                    id: '',
                    name: ''
                },
                personFormDialogVisible: false,
                curPerson: {
                    id: '',
                    name: ''
                },
                rolesAndPersons: [{
                    id: '',
                    name: '都尉',
                    persons: [{
                        id: '',
                        name: '张小敬'
                    }]
                }, {
                    id: '',
                    name: '司丞',
                    persons: [{
                        id: '',
                        name: '李必'
                    }]
                }]
            }
        },
        methods: {
            editPerson: function (personId) {
                this.personFormDialogVisible = true;
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/var.scss";

    .role-person-view {

        .role-box {
            span {
                margin-left: 0.1rem;
                margin-right: 0.1rem;
            }

            .btn-delete{
                margin-left: 10px;
            }
            .btn-delete:hover{
                background: $danger-color;
                color: #ffffff;
                border-radius: 50%;
            }
            .person-item {
                padding: 0;
            }
        }
    }
</style>
<style lang="scss">
    .role-person-view{
        .person-item{
        }
    }

<style>
